<template>
  <div id="" class="container paT55">
    <div class="rightContent">
      <router-view/>
    </div>
  </div>
</template>

<script>
import Corner from '../../../components/corner'
export default {
  name: 'system',
  components: {
    Corner
  },
  methods: {
  }
}
</script>
<style lang="less" scoped>
.container{
  height: 100vh;
  display: flex;
  padding-left: 2%;
  padding-right: 2%;
  box-sizing: border-box;
}
.leftNaV{
  box-sizing: border-box;
  margin-top: 1.5%;
  color: #FFFFFF;
  /*font-size: 2rem;*/
  width: 13%;
  min-width: 240px;
  background: rgba(24, 32, 45, 0.2);
  /*background-color: red;*/
  height: calc(100vh - 190px);
  display: flex;
  justify-content: center;
  border:1px solid rgba(0,245,255,0.5);
  position: relative;
  & /deep/ .cornerTopLeft{
    left: -2px;
    top: -2px;
  }
  & /deep/ .cornerTopRight{
    top: -2px;
    right: -2px;
  }
  & /deep/ .cornerBottomLeft{
    bottom: -2px;
    left: -2px;
  }
  & /deep/ .cornerBottomRight{
    bottom: -2px;
    right: -2px;
  }
  /*align-items: center;*/
  ul{
    margin-top: 9%;
    width: 80%;
  }
  li{
    cursor: pointer;
    font-size: 2rem;
    text-align: left;
    /*background-color: pink;*/
    padding: 15px 15%;
    margin-bottom: 15px;
    /*padding-top: 15px;*/
    /*padding-bottom: 15px;*/
    /*padding-left: 25%;*/
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    &.active{
      box-shadow: inset 0 0 15px rgba(0,245,255,1);
    }
    img{
      margin-right: 10px;
    }
  }
}
.rightContent{
  margin-top: 1.5%;
  font-size: 2.2rem;
  width: 100%;
  /*background-color: palevioletred;*/
  height: calc(100vh - 250px);
}
</style>
